<template>
  <!-- 页面主容器，包含 G6 画布容器 -->
  <div class="page">
    <!-- G6 画布挂载点，id 由 pageId 控制 -->
    <div :id="pageId" class="graph-container" style="position: relative;"></div>
  </div>
</template>


<script>
// 引入 G6 图可视化主库
import G6 from "@antv/g6/build/g6";
// 引入自定义行为注册方法
import { initBehavors } from "@/behavior";
export default {
  data() {
    return {
      pageId: "graph-container", // 画布容器 id
      graph: null                // G6 图实例
    };
  },
  props: {
    // 画布高度
    height: {
      type: Number,
      default: 0
    },
    // 画布宽度
    width: {
      type: Number,
      default: 0
    },
    // 画布初始数据
    data: {
      type: Object,
      default: () => {}
    }
  },
  created() {
    // 注册所有自定义行为
    initBehavors();
  },
  mounted() {
    // 组件挂载后初始化 G6 画布
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    // 初始化 G6 画布
    init() {
      const height =  this.height - 42 // 去除顶部工具栏高度
      const width =  this.width - 400  // 去除两侧面板宽度

      this.graph = new G6.Graph({
        container: "graph-container", // 画布容器 id
        height: height,
        width: width,
        modes: {
          // 支持的 behavior
          default: [
            "drag-canvas",      // 拖动画布
            "zoom-canvas",      // 缩放画布
            "hover-node",       // 节点悬浮
            "select-node",      // 节点选择
            "hover-edge",       // 边悬浮
            "keyboard",         // 键盘快捷键
            "customer-events",  // 自定义事件
            "add-menu"          // 右键菜单
          ],
          mulitSelect: ["mulit-select"], // 框选多选
          addEdge: ["add-edge"],         // 连线模式
          moveNode:[ "drag-item"]        // 节点拖动
        }
      });
      // 获取父组件的 editor 和 command 实例，通知页面已添加
      const { editor, command } = this.$parent;
      editor.emit("afterAddPage", { graph: this.graph, command });
      this.graph.on('node:contextmenu', e => {
     console.log('G6原生右键事件', e);
   });
      this.readData();
    },
    // 读取并渲染初始数据
    readData() {
      let data = this.data;
      if (data) {
        this.graph.read(data);
      }
    }
  }
};
</script>

<style scoped>
/* 页面主容器样式，左右留出面板空间 */
.page{
  margin-left:200px;
  margin-right: 200px;
}
</style>